<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: floats in a named flow with forced breaks and multiple regions</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<meta name="flags" content="ahem">
		<meta name="assert" content="Test checks that floats in named flow contents are floated relative
				to the region container they are laid out in (and not their initial container), even
				when multiple regions are involved and content has forced region breaks.">
		<link rel="match" href="reference/floats-in-named-flow-006-ref.html">
		<style>
		.flow {
			flow-into: f;
			color: gray;
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
		}
		.break {
			break-after: region;
		}
		.floater {
			width: 60px;
			height: 60px;
			background-color: lightblue;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.region {
			flow-from: f;
			max-width: 200px;
			margin: 5px;
		}

		.region > p {
			background: red;
		}
		</style>
	</head>
	<body>
		<p>
			Test passes if you see two gray rectangles, each with a blue square inside it. The first
			rectangle should have a blue square in the top right corner, while the second rectangle
			should have a blue square in the top left corner.<br>
			Test fails is you see any red.
		</p>

		<div class="flow floater right"></div>
		<div class="flow break">
			xxxxxxx
			xxxxxxx
			xxxxxxx
			xxxxxxxxxx
			xxxxxxxxxx
		</div>
		<div class="flow floater left"></div>
		<div class="flow">
			xxxxxxx
			xxxxxxx
			xxxxxxx
			xxxxxxxxxx
			xxxxxxxxxx
		</div>
		
		<div class="region">
			<p>&nbsp;</p>
		</div>
		<div class="region">
			<p>&nbsp;</p>
		</div>
	</body>
</html>